<template>
	<view>
		<button @click="selectImage">选择图片22</button>
		<!-- <image mode="widthFix" :src="path" />
		<ksp-cropper mode="fixed" :width="300" :height="400" :maxWidth="1024" :maxHeight="1024" :url="url"
			@cancel="oncancel" @ok="onok"></ksp-cropper> -->

			<image style="width: 30rpx; height: 25rpx" :src="data.avatar"
								@click="selectImage"></image>
<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="data.url"
				@cancel="cancelSelect" @ok="updateAvatarImg"></ksp-cropper>

	</view>
</template>

<script lang="ts" setup>
import config from '@/config'
import store from "@/store"
import { uploadAvatar } from "@/api/system/user"

import { reactive, getCurrentInstance, computed, ref } from "vue";
	const data = reactive({
	avatar:'',//要显示的头像
	url:'',//插件的url
	})
	const path = ref('')

//点击头像选择相册里的照片
	function selectImage() {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				data.url = res.tempFilePaths[0];//给插件的url赋值，插件就会显示
				path.value = data.url
				selectedImage(path.value)
			},
		});
	}
	function selectedImage(path:string) {
      //url设置为空，隐藏控件
      data.url = ''
		return new Promise((resolve, reject) => {
			uni.showLoading({
				mask: true,
				title: "上传头像中",
			});

			const uploadOptions = {
				url: config.baseUrl+ "/system/user/profile/avatar",
				filePath: path,//插件返的临时路径
				name: "avatarfile",
				header: {
					token: uni.getStorageSync("token"),
				},
			};
        //调用上传接口，将临时路径转换为https开头的图片格式
			uni.uploadFile({
				...uploadOptions,
				success: async (res) => {
					console.log("REDDD",res)
					// try {
					// 	const { result } = JSON.parse(res.data);
					// 	await updateAvatar(result);	//调用修改接口，实现修改头像				
					// 	uni.hideLoading();
					// 	resolve();
					// } catch (error) {				
					// 	console.error("上传失败", error);
					// 	reject(error);
					// }
				},
			});
		});
	}




// export default {
// 		data() {
// 			return {
// 				url: "",
// 				path: ""
// 			}
// 		},
// 		onLoad() {},
// 		methods: {
// 			select() {
// 				uni.chooseImage({
// 					count: 1,
// 					success: (rst) => {
// 						// 设置url的值，显示控件
// 						console.log("select",rst)
// 						this.url = rst.tempFilePaths[0];
// 						uni.hideLoading()
// 						let data = { name: 'avatarfile', filePath: rst.tempFilePaths[0] }
// 						// uploadAvatar(data).then(response => {
// 						// 	console.log("select-response",response)
// 						// 			//store.commit('SET_AVATAR', response.imgUrl)
// 						// 			/*cloud*/
// 						// 			// store.commit('SET_AVATAR', baseUrl + response.imgUrl)
// 						// 			// uni.showToast({ title: "修改成功", icon: 'success' })
// 						// 			// uni.$emit('refresh');
// 						// 			// uni.navigateBack();
// 						// })
// 					}
// 				});

// 			},
// 			onok(ev) {
// 				console.log("OK",ev)
// 				this.url = "";
// 				this.path = ev.path;
// 			},
// 			oncancel() {
// 				// url设置为空，隐藏控件
// 				this.url = "";
// 			}
// 		}
// 	}



</script>

<style>

</style>
